<template>
<div class="ivu-card ivu-card-bordered ivu-card-dis-hover">
  <div class="ivu-card-head"><p>{{$route.meta.title}}</p></div>

  <div class="ivu-card-head">
    <Button type="info" @click="clickClearSearch">全部</Button>
    <Select @on-change="onChangeSelectType" style="width:200px" placeholder="请选择类型">
      <Option v-for="(v, k) in apiConfig['user_wallet_common_log_type']" :value="k.toString()" :key="k">{{ v }}</Option>
    </Select>
  </div>
  
  <div class="ivu-card-body">
    <Table :data="modelsItmes" :columns="columns" show-header size="small">
      <div slot="header">
        <Row>
          <Col span="12">用户列表(总数: {{ modelsPager.totalItems }}, 统计：{{ amountTotal }})</Col>
          <Col span="12">
            <Input placeholder="请输入用户编号" style="width: 50%" v-model="modelsSearch.user_code"/>
            <Button type="primary" icon="search" @click="clickSearch">搜索</Button>
          </Col>
        </Row>
      </div>
    </Table>
  </div>

  <div class="ivu-card-body"><Page :current="modelsPager.current" :total="modelsPager.totalItems" :page-size="modelsPager.limit" show-total @on-change="onChangePage"></Page></div>
</div>
</template>

<script>
import dayjs from 'dayjs';
import ajax from '@/utils/ajax';
import apiConfig from '@/api/config';
import walletLog from '@/api/user/walletLog';

export default {
  data() {
    return {
      columns: [
        {title: '用户编号', key: 'account_user_code', align: 'center'},
        {title: '来源用户编号', key: 'from_account_user_code', align: 'center'},
        {title: '类型', align: 'center', render: (h, params) => { return h('span', this.apiConfig['user_wallet_common_log_type'][params.row.log.type]); }},
        {title: '货', align: 'center', render: (h, params) => {
          switch(params.row.log.active.toString()) {
            case '0':
              return h('Tag', {props:{color:'red'}}, this.apiConfig['user_wallet_common_log_active'][params.row.log.active] + ' ' + params.row.log.amount);
            case '1':
              return h('Tag', {props:{color:'green'}}, this.apiConfig['user_wallet_common_log_active'][params.row.log.active] + ' ' + params.row.log.amount);
          }
        }},
        {title: '利息', align: 'center', render: (h, params) => { return h('span', params.row.log.service_charge); }},
        {title: '旧余额', align: 'center', render: (h, params) => { return h('span', params.row.log.amount_old); }},
        {title: '新余额', align: 'center', render: (h, params) => { return h('span', params.row.log.amount_new); }},
        {title: '创建时间',align: 'center', width: 200, render: (h, params) => { return h('span', dayjs(params.row.log.create_time * 1000).format('YYYY-MM-DD HH:mm:ss')); }},
      ],
      apiConfig: {},
      modelsSearch: {
        user_code: '',
        type: ''
      },
      modelsItmes: [],
      modelsPager: {current: 1, totalItems: 0, 'limit': 10},
      amountTotal: 0
    };
  },
  methods: {
    clickClearSearch() {
      this.modelsSearch = {
        user_code: '',
        type: ''
      };
      this.clickSearch();
    },
    onChangeSelectType(val) {
      this.modelsSearch.type = val;
      this.clickSearch();
    },
    clickSearch() {
      this.onChangePage(1);
    },
    onChangePage(page) {
      this.modelsPager.current = page;
      this.getLogs();
    },
    getLogs() {
      let _this = this;

      walletLog.pagerByField(3,_this.modelsPager,_this.modelsSearch).then(function(res) {
        if(res !== false && res.models !== null && res.models !== undefined && res.models !== '') {
          _this.modelsItmes = [];
          _this.amountTotal = 0;
          for(let k in res.models.items) {
            switch(res.models.items[k].log.active.toString()) {
              case '0':
                _this.amountTotal -= res.models.items[k].log.amount*1;
                break;
              case '1':
                _this.amountTotal += res.models.items[k].log.amount*1;
                break;
            }
            _this.modelsItmes.push(res.models.items[k]);
          }
          _this.modelsPager.current = res.models.current;
          _this.modelsPager.totalItems = res.models.total_items;
          _this.modelsPager.limit = res.models.limit;
        }
      });
    }
  },
  mounted() {
    var _this = this;
    apiConfig.find().then(function(value) {
      _this.apiConfig = value;
      _this.getLogs();
    });
  }
}
</script>

<style>
</style>